@(hosts: uk.bl.monitrix.model.KnownHostList, cappedHosts: List[String])

@import tags.{ navbar, embedParam }

@main("Monitrix - Hosts") {
  @navbar("/hosts")
} {
  <h2>@hosts.count Known Hosts</h2>
  <h3>@hosts.countSuccessful Successfully Crawled</h3>
  
  <table class="table monitrix-hostinfo">
    <tr>
      <td class="monitrix-hostinfo-label">Hosts by Top-Level Domain</td>
      <td>
        <div class="monitrix-barchart-container">
          <div class="monitrix-barchart-y-label-container">
            <span class="monitrix-barchart-y-label">Number of Hosts</span>
          </div>
          <div class="monitrix-barchart-container-right">
            <div class="monitrix-barchart-chart-area" id="hosts-barchart"></div>
            <div class="monitrix-barchart-x-label">Top-Level Domain</div>
          </div>
        </div>
      </td>
    </tr>
    
    <tr>
      <td class="monitrix-hostinfo-label">Capped Hosts (@cappedHosts.size)</td>
      <td class="monitrix-three-column-text" style="width:90%">
        @for(host <- cappedHosts) {
          <a href="@routes.Hosts.getHostInfo(host)@embedParam()">@host</a><br/>
        }
      </td>
    </tr>
    
    <tr>
      <td class="monitrix-hostinfo-label">Average Retries</td>
      <td>
        <div class="not-loaded not-loaded-retries">
          <div class="monitrix-barchart-container">
            <div class="monitrix-axis-y-label-container">
              <span class="monitrix-barchart-y-label">Number of Hosts</span>
            </div>
            <div class="monitrix-barchart-container-right">
              <div class="monitrix-barchart-chart-area" id="average-retries-histogram"></div>
              <div class="monitrix-barchart-x-label">Average No. of HTTP Retries</div>
            </div>
          </div>
          
          <div class="load-button load-button-retries">
            <span class="btn" onclick="loadRetries();">Generate Histogram</span>
          </div>
        </div>
      </td>
    </tr> 
   
    <tr>
      <td class="monitrix-hostinfo-label">Average Delay</td>
      <td>
        <div class="not-loaded not-loaded-delay">
          <div class="monitrix-barchart-container">
            <div class="monitrix-barchart-y-label-container">
              <span class="monitrix-barchart-y-label">Number of Hosts</span>
            </div>
            <div class="monitrix-barchart-container-right">
              <div class="monitrix-barchart-chart-area" id="average-delay-histogram"></div>
              <div class="monitrix-barchart-x-label">Average Delay (in Milliseconds)</div>
            </div>
          </div>
          
          <div class="load-button load-button-delay">
            <span class="btn" onclick="loadDelay();">Generate Histogram</span>
          </div>
        </div>
      </td>
    </tr>
    
    <tr>
      <td class="monitrix-hostinfo-label">% of Robots.txt Blocks</td>
      <td>
        <div class="not-loaded not-loaded-robots">
          <div class="monitrix-barchart-container">
            <div class="monitrix-barchart-y-label-container">
              <span class="monitrix-barchart-y-label">Number of Hosts</span>
            </div>
            <div class="monitrix-barchart-container-right">
              <div class="monitrix-barchart-chart-area" id="robots-percentage-histogram"></div>
              <div class="monitrix-barchart-x-label">Percent of Requests Precluded by robots.txt (0 - 1)</div>
            </div>
          </div>
          
          <div class="load-button load-button-robots">
            <span class="btn" onclick="loadRobots();">Generate Histogram</span>
          </div>
        </div>
      </td>
    </tr>
    
    <tr>
      <td class="monitrix-hostinfo-label">% of Redirects</td>
      <td>
        <div class="not-loaded not-loaded-redirects">
          <div class="monitrix-barchart-container">
            <div class="monitrix-barchart-y-label-container">
              <span class="monitrix-barchart-y-label">Number of Hosts</span>
            </div>
            <div class="monitrix-barchart-container-right">
              <div class="monitrix-barchart-chart-area" id="redirect-percentage-histogram"></div>
              <div class="monitrix-barchart-x-label">Percent of Requests that Received an HTTP 3xx Response (0 - 1)</div>
            </div>
          </div>
          
          <div class="load-button load-button-redirects">
            <span class="btn" onclick="loadRedirects();">Generate Histogram</span>
          </div>
        </div>
      </td>
    </tr>
    
  </table>  

  <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/morris.css")">
  <script src="@routes.Assets.at("javascripts/raphael-min.js")" type="text/javascript"></script>
  <script src="@routes.Assets.at("javascripts/morris.min.js")" type="text/javascript"></script>
  <script src="@routes.Assets.at("javascripts/querystring.js")" type="text/javascript"></script>    
  <script>
    var lastHoveredValue;    
    
    Morris.Bar({
        element: 'hosts-barchart',
        data: [
                @Html({hosts.getTopLevelDomains.reverse.map { tld =>
                  "{ tld: '" + tld + "', count: " + hosts.countForTopLevelDomain(tld) + "}" 
                }.mkString(", ") })
      	    ],
        xkey: 'tld',
        ykeys: ['count'],
        labels: [ '@hosts.getTopLevelDomains.reverse.mkString("', '")' ],
        hideHover: 'false',
        barColors: [ '#850303' ], 
        hoverCallback: function(index, options) {
          var row = options.data[index];
          lastHoveredValue = row.tld;
          
          var embeddable = (QueryString.get('embeddable') != undefined) ? "&embeddable=true" : "";
          var targetLink='/search?type=tld&query=' + row.tld + embeddable;
          
          var html = 
      	    '<a href="' + targetLink + '"><div class="morris-hover-row-label">.' + row.tld + '</div>' + 
      	    '<div class="morris-hover-point" style="color: #850303">' + 
                row.count + ' Hosts' +
              '</div></a>';
          return html;
        }
    });
    
    function logify(data) {
      var logData = [];
      $.each(data, function(idx, xy) {
        logData.push({x: xy.x, y: Math.log(xy.y + 1) / Math.LN10});
      });
      return logData;
    }
    
    function loadRetries() {
        $('.load-button-retries').remove();
        $('.not-loaded-retries').addClass('loading');
        
        $.getJSON('/api/hosts/average-retries', function(data) {
          $('.not-loaded-retries').removeClass('not-loaded').removeClass('loading');
          
          var logData = logify(data);
          
          Morris.Bar({
            element: 'average-retries-histogram',
            data:logData,
            xkey: 'x',
            ykeys: ['y'],
            yLabelFormat: function(y) { return Math.round(Math.pow(10, y)); },
            labels: [ '# of Hosts' ],
            hideHover: 'false',
            barColors: [ '#850303' ],
            hoverCallback: function(index, options) {
              var row = data[index];
              lastHoveredValue = row.x;
            
              var embeddable = (QueryString.get('embeddable') != undefined) ? "&embeddable=true" : "";
              var targetLink='/search?type=avg_retries&min=' + lastHoveredValue +
            		  '&max=' + (lastHoveredValue + 1) + embeddable;
              
              var html =        	  
          	    '<div class="morris-hover-row-label"><a href="' + targetLink + '">' + row.x + '  - ' + (row.x + 1) + ' Retries</a></div>' + 
          	    '<div class="morris-hover-point" style="color: #850303">' +
                    row.y + ' Hosts' +
                  '</div>';
              return html;
            }
          });
          
        });
    }
    
    // Auto-load this graph:
    loadRetries();
    
    function loadDelay() {
      $('.load-button-delay').remove();
      $('.not-loaded-delay').addClass('loading');
        
      $.getJSON('/api/hosts/average-delay', function(data) {
    	$('.not-loaded-delay').removeClass('not-loaded').removeClass('loading');
    	var delayInc = (data[1].x - data[0].x);
    	var logData = logify(data);
    	
        Morris.Bar({
          element: 'average-delay-histogram',
          data: logData,
          xkey: 'x',
          ykeys: ['y'],
          yLabelFormat: function(y) { return Math.round(Math.pow(10, y)); },
          labels: [ '# of Hosts' ],
          hideHover: 'false',
          barColors: [ '#850303' ],
          hoverCallback: function(index, options) {
            var row = data[index];
            lastHoveredValue = row.x;
        
            var embeddable = (QueryString.get('embeddable') != undefined) ? "&embeddable=true" : "";
            var targetLink='/search?type=fetch_duration&query=&min=' + lastHoveredValue + '&max=' + (lastHoveredValue + delayInc) + embeddable;
            
            var html =        	  
      	    '<div class="morris-hover-row-label"><a href="' + targetLink + '">Delay ' + row.x / 1000 + 's - ' + (row.x + delayInc) / 1000 + 's</a></div>' + 
      	    '<div class="morris-hover-point" style="color: #850303">' +
                row.y + ' Hosts' +
              '</div>';
            return html;
          }
        });
    
      });
    }
    
    function loadRobots() {
        $('.load-button-robots').remove();
        $('.not-loaded-robots').addClass('loading');
          
        $.getJSON('/api/hosts/robots-histogram', function(data) {
      	$('.not-loaded-robots').removeClass('not-loaded').removeClass('loading');
      	var increment = (data[1].x - data[0].x);
      	var logData = logify(data);
      	
          Morris.Bar({
            element: 'robots-percentage-histogram',
            data: logData,
            xkey: 'x',
            ykeys: ['y'],
            yLabelFormat: function(y) { return Math.round(Math.pow(10, y)); },
            labels: [ '# of Hosts' ],
            hideHover: 'false',
            barColors: [ '#850303' ],
            hoverCallback: function(index, options) {
              var row = data[index];
              lastHoveredValue = row.x;
          
              var embeddable = (QueryString.get('embeddable') != undefined) ? "&embeddable=true" : "";
              var targetLink='/search?type=robots_percentage&query=&min=' + lastHoveredValue + '&max=' + (lastHoveredValue + increment) + embeddable;
              
              var html = 
        	    '<div class="morris-hover-row-label"><a href="' + targetLink + '">' + Math.round(row.x * 100) + '&#37; Blocked</a></div>' + 
        	    '<div class="morris-hover-point" style="color: #850303">' +
                  row.y + ' Hosts' +
                '</div>';
              return html;
            }
          });
      
        });
    }
    
    function loadRedirects() {
        $('.load-button-redirects').remove();
        $('.not-loaded-redirects').addClass('loading');
          
        $.getJSON('/api/hosts/redirects-histogram', function(data) {
      	$('.not-loaded-redirects').removeClass('not-loaded').removeClass('loading');
      	var increment = (data[1].x - data[0].x);
      	var logData = logify(data);
      	
          Morris.Bar({
            element: 'redirect-percentage-histogram',
            data: logData,
            xkey: 'x',
            ykeys: ['y'],
            yLabelFormat: function(y) { return Math.round(Math.pow(10, y)); },
            labels: [ '# of Hosts' ],
            hideHover: 'false',
            barColors: [ '#850303' ],
            hoverCallback: function(index, options) {
              var row = data[index];
              lastHoveredValue = row.x;
              
	          var embeddable = (QueryString.get('embeddable') != undefined) ? "&embeddable=true" : "";
              var targetLink ='/search?type=redirect_percentage&query=&min=' + lastHoveredValue + '&max=' + (lastHoveredValue + increment) + embeddable;
          
              var html =        	  
        	    '<div class="morris-hover-row-label"><a href="' + targetLink + '">' + Math.round(row.x * 100)  + '&#37; Redirected</a></div>' + 
        	    '<div class="morris-hover-point" style="color: #850303">' +
                  row.y + ' Hosts' +
                '</div>';
              return html;
            }
          });
        });
    }
  </script>
}
